<template>
  <view class="container">
    <view class="search-bar">
      <input
        v-model="searchQuery"
        placeholder="请输入城市名"
        @input="filterLocations"
        @confirm="handleInputConfirm"
      />
      <button @click="handleInputConfirm">确定</button>
    </view>
    <scroll-view scroll-y class="location-list">
      <view
        v-for="(location, index) in filteredLocations"
        :key="index"
        class="location-item"
        @click="selectLocation(location.city)"
      >
        {{ location.city }}
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '', // 搜索输入
      locations: [], // 城市数据
      filteredLocations: [] // 过滤后的城市数据
    };
  },
  methods: {
    // 去重函数，仅依据 city 去重
    removeDuplicates(data) {
      const uniqueData = [];
      const seen = new Set();

      data.forEach((item) => {
        if (!seen.has(item.city)) {
          seen.add(item.city);
          uniqueData.push(item);
        }
      });

      return uniqueData;
    },
    // 过滤地点列表
    filterLocations() {
      if (this.searchQuery === '') {
        this.filteredLocations = this.locations;
      } else {
        this.filteredLocations = this.locations.filter((location) =>
          location.city.includes(this.searchQuery)
        );
      }
    },
    // 选择地点后返回上一页并将选择结果传递回去
    selectLocation(city) {
      const currentPage = getCurrentPages()[getCurrentPages().length - 1];
      const { type } = currentPage.options;
      console.log('当前页面 type 参数:', type);
      console.log('准备触发 citySelected 事件，传递数据：', { type, city });
      uni.$emit('citySelected', { type, city });
      uni.navigateBack();
    },
    // 处理输入框回车事件或点击确定按钮事件
    handleInputConfirm() {
      const inputValue = this.searchQuery.trim();
      if (inputValue) {
        const matchedLocation = this.locations.find((location) =>
          location.city.includes(inputValue)
        );
        if (matchedLocation) {
          this.selectLocation(matchedLocation.city);
        }
      }
    }
  },
  mounted() {
    // 使用 uni.request 发起请求获取城市数据
    uni.request({
      url: 'http://localhost:8081/place',
      method: 'GET',
      success: (res) => {
        console.log('请求成功，响应状态码:', res.statusCode);
        console.log('请求成功，响应数据:', res.data);
        if (res.statusCode === 200) {
          // 对数据进行去重处理
          const uniqueData = this.removeDuplicates(res.data);
          this.locations = uniqueData;
          this.filteredLocations = uniqueData;
          // 获取当前页面的参数
          const currentPage = getCurrentPages()[getCurrentPages().length - 1];
          const { type, current } = currentPage.options;
          console.log('当前页面参数:', currentPage.options);
          if (current) {
            this.searchQuery = decodeURIComponent(current);
          }
        } else {
          console.error('获取城市数据失败，状态码:', res.statusCode);
        }
      },
      fail: (err) => {
        console.error('获取城市数据失败:', err);
      }
    });
  }
};
</script>
<style scoped>
.container {
  padding: 20px;
}

.search-bar {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.search-bar input {
  flex: 1;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  margin-right: 10px;
}

.search-bar button {
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
}

.location-list {
  height: calc(100vh - 140px); /* 根据实际情况调整 */
}

.location-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.location-item:last-child {
  border-bottom: none;
}
</style>